import { createStyles } from 'antd-style';

export const useBarterStyles = createStyles(({ token }) => ({
    modal: {
        '.ant-modal-content': {
            width: 'max-content',
        },
    },
    wrapper: {
        width: '100%',
    },
    inventory: {
        marginBlock: '16px',
        width: '339px',
        padding: '16px',
        borderRadius: '16px',
        background: token.colorBgContainer,
    },
    barterTitle: {
        paddingInline: '16px',  
    },
    barterTitleCount: {
        background: token.brandColor,
        fontSize: '12px',
        padding: '4px 8px 4px 8px',
        borderRadius: '40px',
        marginLeft: '6px',

    },
    barterOfferWrapper: {
        marginBlock: '16px',  
    },
    card: {
        width: '58px',
        height: '58px',
        borderRadius: '15px',
        border: '1px solid #232C34',
        overflow: 'hidden',
        cursor: 'pointer',
        position: 'relative',
        'img': {
            width: '100%',
            height: '100%',
            objectFit: 'cover',
        },
        '&.checked': {
            '--pos': 0,
            '::before': {
                content: '""',
                position: 'absolute',
                width: '18px',
                height: '18px',
                transform: 'translate(-50%, -50%)',
                left: '50%',
                top: '50%',
                backgroundRepeat: 'no-repeat',
                zIndex: 1,
                backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2038%2028%22%3E%3Cpath%20d%3D%22M36.8929%201.22666C36.645%200.976719%2036.35%200.778334%2036.0251%200.642951C35.7001%200.507568%2035.3516%200.437866%2034.9995%200.437866C34.6475%200.437866%2034.299%200.507568%2033.974%200.642951C33.649%200.778334%2033.3541%200.976719%2033.1062%201.22666L13.2395%2021.12L4.89287%2012.7467C4.63548%2012.498%204.33164%2012.3025%203.99869%2012.1713C3.66575%2012.0401%203.31021%2011.9758%202.9524%2011.9819C2.59458%2011.9881%202.24149%2012.0647%201.91328%2012.2074C1.58508%2012.35%201.28818%2012.5559%201.03954%2012.8133C0.790904%2013.0707%200.5954%2013.3746%200.46419%2013.7075C0.332979%2014.0405%200.268631%2014.396%200.274822%2014.7538C0.281012%2015.1116%200.35762%2015.4647%200.500269%2015.7929C0.642918%2016.1211%200.848816%2016.418%201.10621%2016.6667L11.3462%2026.9067C11.5941%2027.1566%2011.889%2027.355%2012.214%2027.4904C12.539%2027.6258%2012.8875%2027.6955%2013.2395%2027.6955C13.5916%2027.6955%2013.9401%2027.6258%2014.2651%2027.4904C14.59%2027.355%2014.885%2027.1566%2015.1329%2026.9067L36.8929%205.14666C37.1636%204.89695%2037.3796%204.59388%2037.5273%204.25655C37.6751%203.91921%2037.7514%203.55493%2037.7514%203.18666C37.7514%202.81839%2037.6751%202.45411%2037.5273%202.11678C37.3796%201.77945%2037.1636%201.47637%2036.8929%201.22666Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E")',
            },
            '::after': {

                content: '""',
                position: 'absolute',
                top: 'var(--pos)',
                left: 'var(--pos)',
                right: 'var(--pos)',
                bottom: 'var(--pos)',
                background: '#6DE38099',
            },
        },
    },
}));